Dashboard.addWidget({
    
    getId : function(){
        return 'table-chart-widget';
    },
    
    getName : function(){
        return 'Table Chart';
    },
    
    getDescription : function(){
        return {
            en : 'Widget that display a KPI in a table',
            de : 'Widget that display a KPI in a table'
        };
    },
    
    getIconClass : function(){
        return 'glyphicon glyphicon-th-list';
    },
    
    createContent : function(configuration, currentWidgetInstanceId){
        var kpiInfo = ModelManager.getKpiInfo(configuration.modelId.value, configuration.kpiId.value);
        var kpiMeasure = Dashboard.evaluateKpi(currentWidgetInstanceId, configuration.modelId.value, configuration.kpiId.value);

        var tableHtml = '<table class="table table-condensed table-hover"><tr>';
        kpiMeasure.columns.forEach(function(item){
            tableHtml += '<th>'+item+'</th>';
        });
        tableHtml += '</tr>';
        kpiMeasure.data.forEach(function(dataItem){
            tableHtml += '<tr>';
            kpiMeasure.columns.forEach(function(columnName){
                tableHtml += '<td>' + (dataItem[columnName]!=null?dataItem[columnName] + ' ' + kpiInfo.getFieldInfos(columnName).measureUnit:'')  + '</td>';
            });
            tableHtml += '</tr>';
        });
        tableHtml += '</table>';
        
        var tableDom = $(tableHtml);
        /*.popover({
            placement : 'auto right',
            container : 'body',
            html : true,
            title : kpiInfo.name + ' measure additional infos',
            content : function(){
                var html = '<table class="table table-condensed table-hover">';
                for(var moreInfoKey in kpiMeasure.moreInfo)
                    html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+kpiMeasure.moreInfo[moreInfoKey]+'</td></tr>';
                if(Object.keys(kpiMeasure.moreInfo).length==0)
                    html += '<tr><td>No additional infos available</td></tr>';
                html += '</table>';
                return html;
            }(),
            trigger : 'hover'
        });*/
        
        var kpiInfoPopoverConfig = {
            placement : 'auto right',
            container : 'body',
            html : true,
            title : kpiInfo.name + ' additional infos',
            content : function(){
                var html = '<table class="table table-condensed table-hover">';
                html += '<tr><th>KPI additional infos</th><th></th></tr>';
                if(kpiInfo.type!=null)
                    html += '<tr><td><b>type</b></td><td>'+kpiInfo.type+'</td></tr>';
                for(var moreInfoKey in kpiInfo.moreInfo)
                    html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+kpiInfo.moreInfo[moreInfoKey]+'</td></tr>';
                if(Object.keys(kpiInfo.moreInfo).length==0 && kpiInfo.type==null)
                    html += '<tr><td>No additional infos available</td><td></td></tr>';
                
                html += '<tr><th>Measures additional infos</th><th></th></tr>';
                for(var moreInfoKey in kpiMeasure.moreInfo)
                    html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+kpiMeasure.moreInfo[moreInfoKey]+'</td></tr>';
                if(Object.keys(kpiMeasure.moreInfo).length==0)
                    html += '<tr><td>No additional infos available</td><td></td></tr>';
                html += '</table>';
                
                html += '</table>';
                
                return html;
            }(),
            trigger : 'hover'
        };
        
        var _createCircleCode = function(color){
            return'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="'+color+'" stroke="'+color+'" stroke-opacity="0.4" stroke-width="2"/></svg>';
        }
        
        var targetRangeStatusDom = null;
        if(kpiMeasure.targetRangeAlgorithmResult!=null){
            var targetRangeStatus = kpiMeasure.targetRangeAlgorithmResult.status;
            var targetRangeStatusHtml = _createCircleCode(targetRangeStatus==null?'lightgrey':(targetRangeStatus>0?'green':(targetRangeStatus<0?'red':'grey')));
            targetRangeStatusDom = $('<div>').append($(targetRangeStatusHtml)).popover({
                placement : 'auto right',
                container : 'body',
                html : true,
                title : kpiInfo.name + ' target range status additional infos',
                content : function(){
                    var html = '<table class="table table-condensed table-hover">';
                    for(var moreInfoKey in kpiMeasure.targetRangeAlgorithmResult.moreInfo)
                        html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+kpiMeasure.targetRangeAlgorithmResult.moreInfo[moreInfoKey]+'</td></tr>';
                    if(Object.keys(kpiMeasure.targetRangeAlgorithmResult.moreInfo).length==0)
                        html += '<tr><td>No additional infos available</td></tr>';
                    html += '</table>';
                    return html;
                }(),
                trigger : 'hover'
            });
        }
        
        var alertRangeStatusDomList = [];
        for(var i=0;i<kpiMeasure.alertRangeAlgorithmResultList.length;i++){
            var alertCurrentResult = kpiMeasure.alertRangeAlgorithmResultList[i];
            var alertSuccessColor = 'green';
            if(alertCurrentResult.widgetSpecificCustomization != null && alertCurrentResult.widgetSpecificCustomization.alertSuccessColor != null && alertCurrentResult.widgetSpecificCustomization.alertSuccessColor != '')
                alertSuccessColor = alertCurrentResult.widgetSpecificCustomization.alertSuccessColor;
            var alertCurrentStatus = alertCurrentResult.status;
            var alertCurrentStatusHtml = _createCircleCode(alertCurrentStatus==null?'lightgrey':(alertCurrentStatus==0?'grey':(alertCurrentStatus<0?'lightgrey':alertSuccessColor)));
            var alertCurrentStatusDom = $('<div>').append($(alertCurrentStatusHtml)).popover({
                placement : 'auto right',
                container : 'body',
                html : true,
                title : kpiInfo.name + ' alert range status additional infos',
                content : function(){
                    var html = '<table class="table table-condensed table-hover">';
                    for(var moreInfoKey in alertCurrentResult.moreInfo)
                        html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+alertCurrentResult.moreInfo[moreInfoKey]+'</td></tr>';
                    if(Object.keys(alertCurrentResult.moreInfo).length==0)
                        html += '<tr><td>No additional infos available</td></tr>';
                    html += '</table>';
                    return html;
                }(),
                trigger : 'hover'
            });
            alertRangeStatusDomList.push(alertCurrentStatusDom);
        }
            
        var node = $('<div class="table-responsive">').append(
            $('<p><b>' + kpiInfo.name + '</b></p>').popover(kpiInfoPopoverConfig)
        ).append(
            $('<p>' + kpiInfo.description + '</p>').popover(kpiInfoPopoverConfig)
        ).append(
            $('<p class="inline">').append(
                targetRangeStatusDom
            ).append(
                alertRangeStatusDomList
            )
        ).append(
            tableDom
        );

        return node;
    },
    
    getConfiguration : function(){
        return {
            modelId : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            },
            kpiId : {
                description : {
                    en : '',
                    de : ''
                },
                value : ''
            }
        };
    },
    
    createConfiguration : function(presetConfig){
        
        var node = $('<div>').append(
            $('<label>', {text : 'Select the KPI: ', for : 'modelSelect'})
        ).append(" ").append(
            $('<select>', {id : 'modelSelect'}).change(function(){
                var kpiSelect = node.find('#kpiSelect');
                var modelId = node.find('#modelSelect').find(":selected").val();
                
                kpiSelect.empty();
                kpiSelect.append('<option value="">--KPI--</option>');
                ModelManager.getKpiList(modelId).forEach(function(item){
                    kpiSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                }, this);
            }).append(function(){
                var modelSelectArray = [
                    '<option value="">--Model--</option>'
                ];
                ModelManager.getKpiModelList().forEach(function(item){
                    modelSelectArray.push('<option value="' + item.id + '">' + item.name + '</option>');
                }, this);
                return modelSelectArray;
            }.call())
        ).append(" ").append(
            $('<select>', {id : 'kpiSelect'}).append(function(){
                return [
                    '<option value="">--KPI--</option>'
                ];
            }.call())
        );
        
        if(presetConfig != null){
            node.find('#modelSelect').val(presetConfig.modelId.value);
            node.find('#modelSelect').trigger("change");
            node.find('#kpiSelect').val(presetConfig.kpiId.value);
            node.find('#kpiSelect').trigger("change");
        }
        
        var okHandler = function(){
            var modelId = node.find('#modelSelect').find(":selected").val();
            var kpiId = node.find('#kpiSelect').find(":selected").val();
            //alert(node.find('#kpiSelect').find(":selected").index());
            if(modelId === '' || kpiId === '')
                throw 'modelId or kpiId not correctly provided';
            
            ModelManager.getKpiInfo(modelId, kpiId);
            
            return {
                modelId : {value : modelId},
                kpiId : {value : kpiId}
            }
        }; 
        
        return {
            nodeElement : node,
            okHandler : okHandler
        };
    },
    
    getPreferredSize : function(){
        return {w:4, h:4};
    }
});